<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover">
        <div class="user">
          <img :src="userImg" />
          <div class="userinfo">
            <p class="message">后台总管理：00101组</p>
            <p class="name">汤姆</p>
            <p class="access">全员管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间：<span>2020-5-21</span></p>
          <p>上次登录地点：<span>武汉</span></p>
        </div>
      </el-card>
      <el-card shadow="hover" style="height:522px; margin-top: 20px;">
        <el-table :data="tableData" stripe>
          <el-table-column
            show-overflow-tooltip
            v-for="(val, key) in tableLabel"
            :key="key"
            :prop="key"
            :label="val"
          ></el-table-column>
        </el-table>
      </el-card>
    </el-col>

    <el-col :span="16">
      <div class="num">
        <el-card
          shadow="hover"
          v-for="item in countData"
          :key="item.name"
          :body-style="{ display: 'flex', padding: 0 }"
        >
          <i
            class="icon"
            :class="`el-icon-${item.icon}`"
            :style="{ background: item.color }"
          ></i>
          <div class="detail">
            <p class="num">{{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
      <el-card shadow="hover">
        <LineEC
          style="height:280px;"
          :chartData="echartData.producer"
          v-loading="loading"
        ></LineEC>
      </el-card>
      <div>
        <el-card shadow="hover">
          <LineEC
            style="height:280px;"
            :chartData="echartData.registry"
            v-loading="loading"
          >
          </LineEC
        ></el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import LineEC from "../layout/echarts/LineEC.vue";
export default {
  components: {
    LineEC
  },
  name: "Home",
  data() {
    return {
      userImg: require("../assets/user.jpg"),
      countData: [
        { name: "今日商家注册", value: 899, icon: "success", color: "#2ec7c9" },
        {
          name: "今日购物用户注册",
          value: 1223,
          icon: "success",
          color: "#aa0000"
        },
        {
          name: "今日成交商品量",
          value: 7551,
          icon: "s-goods",
          color: "#55aa00"
        },
        { name: "昨日商家注册", value: 788, icon: "success", color: "#2ec7c9" },
        {
          name: "昨日购物用户注册",
          value: 1111,
          icon: "success",
          color: "#aa0000"
        },
        {
          name: "昨日成交商品量",
          value: 6551,
          icon: "s-goods",
          color: "#55aa00"
        }
      ],
      tableData: [], //用来获取参数存储
      tableLabel: {
        name: "团队",
        todayAdd: "今日注册",
        mothAdd: "本月注册",
        totalAdd: "昨日注册"
      },
      loading: true,
      echartData: {
        //折线图参数
        producer: {
          title: { text: "商品销售折线图" },
          xData: [], //X轴数据
          series: []
        },
        registry: {
          //可以编辑一个柱状图
          title: { text: "用户注册柱状图" },
          xData: [],
          series: []
        }
      }
    };
  },
  methods: {
    getTableData() {
      this.$http
        .get("http://localhost:9527/shop")
        .then(res => {
          console.log(res.data);
          res = res.data;
          this.tableData = res.data.shopCart;

          //商家销售折线图
          const producer = res.data.producerData;
          this.echartData.producer.xData = res.data.date; //获取日期数据后保存
          //第一步取出series中的name部分--键名
          let keyArray = Object.keys(producer[0]); //已经成功取出
          console.log(keyArray);
          keyArray.forEach(key => {
            this.echartData.producer.series.push({
              name: key, //以这种方式可以更改自己想要命名的name
              data: producer.map(item => item[key]), //用map获取该键值
              type: "line"
            });
          });
          //用户注册折柱状图
          const registry = res.data.registryData;
          this.echartData.registry.xData = res.data.rdate; //获取日期数据后保存
          //第一步取出series中的name部分--键名
          let registryArray = Object.keys(registry[0]); //已经成功取出
          console.log(registryArray);
          registryArray.forEach(key => {
            this.echartData.registry.series.push({
              name: key, //以这种方式可以更改自己想要命名的name
              data: registry.map(item => item[key]), //用map获取该键值
              type: "bar"
            });
          });
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.getTableData();
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/index.scss";
</style>
